<template>
  <div class="box">
    <div class="banner">
      <img
        src="https://img.youpin.mi-img.com/jianyu/8e1be4b1_441e_42d5_89d9_e1c2e9fc0409.png@base@tag=imgScale&h=225&m=1&q=80&w=750"
        alt=""
      />
    </div>
    <div class="lie">
      <ul>
        <li style="color: rgb(224, 32, 32)">发布会新品</li>
        <li>雷军推荐</li>
        <li>有品新品</li>
        <li>小米爆款</li>
        <li>小米新品</li>
        <li>暖冬应季</li>
      </ul>
    </div>
    <div class="view">
      <img
        src="https://img.youpin.mi-img.com/jianyu/t5v93or491g_22026147641621845763097.png@base@tag=imgScale&h=68&w=120"
        alt=""
      /><span>发布会新品</span
      ><img
        src="https://img.youpin.mi-img.com/jianyu/4d1ppr0mhmg_22026147641621845763119.png@base@tag=imgScale&h=68&w=120"
        alt=""
      />
    </div>
    <div class="commodity">
      <ul>
        <li v-for="(v, i) in 5" :key="i">
          <img
            :src=imgs
          />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
data() {
    return {
        arr:[{img:'https://img.youpin.mi-img.com/ink/19041a4d_e13c_4ddb_acc9_2f73191d121f.png@base@tag=imgScale&h=264&m=1&q=80&w=750'},{img:'https://img.youpin.mi-img.com/ink/19041a4d_e13c_4ddb_acc9_2f73191d121f.png@base@tag=imgScale&h=264&m=1&q=80&w=750'},]

    }
},
props:["imgs"]

}
</script>

<style scoped>
.box {
  background-color: rgb(148, 157, 166);
  width: 100%;
  height: 100%;
}
.lie {
  width: 3.75rem;
  height: 0.43rem;
  border-radius: 0.07rem;
  margin: auto;
  background-color: #ffff;
}
.lie ul {
  display: flex;
  line-height: 0.43rem;
  white-space: nowrap;
  overflow: auto;
}
.lie ul li {
  margin-right: 0.1rem;
  margin-left: 0.05rem;
  font-size: 0.16rem;
}
.view {
  width: 3.75rem;
  height: 0.34rem;
  margin: auto;
  text-align: center;
  margin-top: 0.1rem;
}
.view img,
.view span {
  display: inline-block;
  color: #ffff;
  vertical-align: middle;
}
.view img {
  width: 0.6rem;
  height: 0.34rem;
}
.view span {
  font-weight: 600;
  font-size: 0.18rem;
}
.commodity ul li {
  margin-top: 0.15rem;
  margin-bottom: 0.1rem;
}
</style>
